//设置界面元素canvas绘制变量
var canvas;
var img = new Image();
var penColor = document.getElementsByName("pen_color");
var penSize = document.getElementsByName("pen_size");
var nitepenColor = document.getElementsByName("nitepen_color");
var nitepenSize = document.getElementsByName("nitepen_size");
var eraserSize = document.getElementsByName("eraser_size");
var colorStyle = new Array(
	"#ffffff","#939598","#000000",
	"#ffef00","#ff9a10","#5c9100",
	"#00bdef","#0051d5","#5a3194",
	"#e6008c","#e61021","#e8e8e8");
var niteColor = new Array(
	"rgba(117,62,36,0.5)","rgba(0,123,214,0.5)","rgba(0,189,239,0.5)",
	"rgba(0,225,0,0.5)","rgba(255,240,1,0.5)","rgba(255,138,0,0.5)");

var baseurl;

function setBaseUrl(url){
	baseurl = url;
}

//设置图片来源
function setScreenshotUrl(url,width,height){
	img.src = url;
	console.log("img:"+img.width,img.height);
	console.log(width,height);
	height = width*height/img.width;
	img.onload = function(){
		var note = document.getElementById("note");
		canvas = new Note.Container(note, img, {width,height});
	};
}

//对笔记的操作
function draw(type){
	canvas._opType = type;
}

function save(){
	var data = canvas.save();
}

//上方功能栏的实现
function changePenwidth(width){
	canvas._painter._penWidth = width;
}

function changePencolor(color){
	canvas._painter._penStyle = color;	
}

function changeEraser(size){
	canvas._eraserSize = size;
}

//加载异步请求得到的下拉分类信息
function loadSelectinfo(SelectInfo){
	var select_obj = document.getElementById("save_class");
	select_obj.innerHTML = "";
	for(var i=0;i<SelectInfo.length;i++){
		var el_a = document.createElement("option");
		el_a.value = SelectInfo[i].id;
		el_a.innerHTML = SelectInfo[i].name;
		select_obj.appendChild(el_a);
	}
}
//从服务器异步请求下拉分类信息
function getSelectinfo(){
	$.ajax({
		type:"post",
		url: baseurl+"/file/loadtype",
		success:function(data){
			//console.log(data);
			if(data!="ERROR"){
				var selectData = JSON.parse(data);
				loadSelectinfo(selectData);
			}
		}
	}); 
}

//对界面上面的按钮和模态框中的按钮进行事件绑定
document.getElementById("rectangle").addEventListener("click", function(){
	draw(this.id);
});
document.getElementById("curve").addEventListener("click", function(){
	draw(this.id);
});
document.getElementById("line").addEventListener("click", function(){
	draw(this.id);
});
document.getElementById("ellipse").addEventListener("click", function(){
	draw(this.id);
});
document.getElementById("eraser").addEventListener("click", function(){
	draw(this.id);
});
document.getElementById("label").addEventListener("click", function(){
	draw(this.id);
});
document.getElementById("save").addEventListener("click", function(){
	$.ajax({
		type:"post",
		url:baseurl+"/user/islogin",
		success:function(data){
			//console.log(data);
			if(data == "OK")
			{
				getSelectinfo();
				$('#modal-save').modal('show');
			}else{
				$('#modal_login').modal('show');
			}
		}
	}); 
});
document.getElementById("sure_save").addEventListener("click",function(){
	var noteName = document.getElementById("save_name").value;
	var noteType = document.getElementById("save_class").value;
	var data = JSON.stringify(canvas.save());
	$('#auth').val(noteName);
	$('#typeId').val(noteType);
	$('#NoteData').val(data);
	$.ajax({
		type:"post",
		data:$('#form_save').serialize(),
		url:baseurl+"/file/add",
		success:function(data){
			//console.log(data);
			if(data == "OK"){
				$('#modal-save').modal('hide');
				alert("笔记收藏成功！");
			}
			else
				alert("笔记收藏失败！");
		}
	});
});
document.getElementById("login").addEventListener("click",function(){
	$.ajax({
		type:"post",
		data:$('#login_form').serialize(),
		url:baseurl+"/user/loginJson",
		success:function(data){
			//console.log("登陆信息:"+data);
			if(data == "OK"){
				$('#modal_login').modal('hide');
				$('#modal-save').modal('show');
			}else{
				alert("不好意思，登陆失败！");
			}
		}
	});
});
document.getElementById("new_class").addEventListener("click", function(){
	$('#modal-save').modal('hide');
	$('#modal_new').modal('show');
});
document.getElementById("newClassButton").addEventListener("click", function(){
	$.ajax({
		type:"post",
		data:$("#new_form").serialize(),
		url:baseurl+"/file/addtype",
		success:function(data){
			//console.log(data);
			if(data == "OK"){
				getSelectinfo();
				$('#modal_new').modal('hide');
				$('#modal-save').modal('show');
			}else{
				alert("添加分类失败！");
			}
		}
	});
});
document.getElementById("exit").addEventListener("click", function(){
	if(confirm("你确认离开吗？"))
	{
		window.history.back(-1);
	}
});

for(var i=0;i<penColor.length;i++)
{
	penColor[i].addEventListener("click",function(e){
		changePencolor(colorStyle[e.target.id]);
		draw("curve");
	});
}

for(var i=0;i<eraserSize.length;i++)
{
	eraserSize[i].addEventListener("click",function(e){
		changeEraser(e.target.id);
		draw("eraser");
	});
}

for(var i=0;i<penSize.length;i++)
{
	penSize[i].addEventListener("click",function(e){
		changePenwidth(e.target.id);
		draw("curve");
	});
}

for(var i=0;i<nitepenColor.length;i++)
{
	nitepenColor[i].addEventListener("click",function(e){
		changePencolor(niteColor[e.target.id]);
		draw("curve");
	});
}

for(var i=0;i<nitepenSize.length;i++)
{
	nitepenSize[i].addEventListener("click",function(e){
		changePenwidth(e.target.id);
		draw("curve");
	});
} 
